.container {
    width: 10rem;
    height: 13.1733rem;
    margin-top: .0267rem;
    /* box-sizing: border-box; */
    display: flex;
}

.leftNavigation {
    width: 2.1333rem;
    /* height: 13.1733rem; */
    height: 11.7333rem;
    overflow-y: auto;
    background-color: #f3f5f7;
}

.leftNavigation .navigationContent {
    width: 2.1333rem;
    list-style: none;
}

.leftNavigation .navigationContent li {
    width: 2.1333rem;
    height: 1.44rem;
}

.leftNavigation .navigationContent li div {
    width: 1.4933rem;
    height: 1.44rem;
    margin-left: .32rem;
    border-bottom: .0133rem solid rgba(7, 17, 27, .1);
    box-sizing: border-box;
    display: flex;
    align-items: center;
}

.leftNavigation .navigationContent li div span {
    line-height: .3733rem;
    font-size: .32rem;
    font-weight: 200;
    text-align: left;
}

.leftNavigation .navigationContent li span img {
    width: .32rem;
    /* vertical-align: middle; */
}

.productContainer {
    width: 7.8667rem;
    height: 13.1733rem;
    overflow-y: auto;
    /* height: 13.3333rem; */
}

.productContent {
    width: 7.8667rem;
    background-color: #d9dde1;
    list-style: none;
}

.productContent .title {
    width: 7.84rem;
    height: .6933rem;
    margin-left: .0267rem;
    background-color: #f3f5f7;
    font-size: .32rem;
    color: rgb(147, 153, 159);
    line-height: .6933rem;
    text-align: left;
}

.productContent .foodsContent {
    background-color: white
}

.productContent .foodsContent .foodsList {
    width: 6.9067rem;
    list-style: none;
}

.productContent .foodsContent .foodsList li {
    width: 6.9067rem;
    border-bottom: .0133rem solid rgba(7, 17, 27, .1);
    box-sizing: border-box;
    margin-left: .48rem;
    display: flex;
}

.productContent .foodsContent .foodsList li img {
    width: 1.52rem;
    height: 1.52rem;
    border-radius: .0667rem;
    margin-top: .48rem;
}

.productContent .foodsContent .foodsList li .foodinfo {
    width: 5.12rem;
    margin: .48rem .48rem .48rem .2667rem;
    text-align: left;
}

.productContent .foodsContent .foodsList li .foodinfo .foodname {
    margin-top: .0533rem;
    font-size: .3733rem;
    color: rgb(7, 17, 27);
    line-height: .3733rem;
}

.productContent .foodsContent .foodsList li .foodinfo .description {
    margin: .2133rem 0 .2133rem 0;
    font-size: .2667rem;
    line-height: .2667rem;
    color: rgb(147, 153, 159);
}

.productContent .foodsContent .foodsList li .foodinfo .cellState {
    font-size: .2667rem;
    line-height: .2667rem;
    color: rgb(147, 153, 159);
}

.productContent .foodsContent .foodsList li .foodinfo .sellCount {
    /* font-size: .2667rem;
    line-height: .2667rem;
    color: rgb(147, 153, 159); */
}

.productContent .foodsContent .foodsList li .foodinfo .rating {
    margin-left: .32rem;
    /* font-size: .2667rem;
    line-height: .2667rem;
    color: rgb(147, 153, 159); */
}

.productContent .foodsContent .foodsList li .foodinfo .priceinfo {
    font-size: 0;
    display: flex;
}

.productContent .foodsContent .foodsList li .foodinfo .price {
    font-size: .3733rem;
    color: rgb(240, 20, 20);
    font-weight: 700;
    line-height: .64rem;
}

.productContent .foodsContent .foodsList li .foodinfo .price span {
    font-size: .2667rem;
    font-weight: normal;
}

.productContent .foodsContent .foodsList li .foodinfo .oldPrice {
    margin-left: .2133rem;
    font-size: .2667rem;
    color: rgb(147, 153, 159);
    font-weight: 700;
    line-height: .64rem;
    text-decoration: line-through;
}

.productContent .foodsContent .foodsList li .foodinfo .orderCount {
    margin-left: auto;
    display: flex;
    align-items: center;
}

.productContent .foodsContent .foodsList li .foodinfo .orderCount .num {
    display: inline-block;
    width: .64rem;
    font-size: .2667rem;
    color: rgb(147, 153, 159);
    line-height: .64rem;
    text-align: center;
}

.productContent .foodsContent .foodsList li .foodinfo .orderCount .subBtn {
    line-height: .64rem;
    color: rgb(0, 160, 220);
}

.productContent .foodsContent .foodsList li .foodinfo .orderCount .addBtn {
    line-height: .64rem;
    color: rgb(0, 160, 220);
}

.ballX {
    width: .4rem;
    height: .4rem;
    border-radius: 50%;
    z-index: 0;
    position: fixed;
    left: .8rem;
    bottom: .5333rem;
    /* display: none; */
}

.ballY {
    width: .4rem;
    height: .4rem;
    border-radius: 50%;
    background-color: #f01414;
}